<script setup lang="ts">
import { reactive } from "vue";

const info = reactive({ name: "张三", age: 18 });

const changeName = () => {
  info.name = "李四";
  //   info = { ...info, name: "李四" }; // wrong
};
const submit = () => {
  console.log(info);
};
</script>

<template>
  <div>{{ info }} <button @click="changeName">改变</button></div>
  <form @submit.prevent="submit">
    <div><input type="text" v-model="info.name" /></div>
    <div><input type="text" v-model="info.age" /></div>
    <div><button type="submit">提交</button></div>
  </form>
</template>

<style scoped></style>
